<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/mediaelement-and-player.css"/>
		<link rel="stylesheet" href="css/video-js.css" />
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="js/mediaelement-and-player.min.js"></script>
		<script type="text/javascript" src="js/video.min.js"></script>
		<style type="text/css">
			.loadingImg{
				position: absolute; 
				left: 70px; 
				top:20px;
				z-index: 1000;
			}
		</style>
	</head>

	<body style="width: 1000px;height: 1500px;">
	</head>
		<body>
			
			<div style="position: relative; width: 207px;height: 125px;">
				<img class="loadingImg" src="resources/img/loading.gif"/>
				<video  id="video1" controls width="207" height="125" poster="resources/img/tianqi3.jpg">
					<source src="http://122.224.174.179:9990/qzVideo/tv1_0727.mp4" type='video/mp4' />
				</video>
			</div>
			<div style="position: relative; width: 207px;height: 125px;">
				<img class="loadingImg" src="resources/img/loading.gif"/>
				<video  id="video2" controls width="207" height="125" poster="resources/img/tianqi3.jpg">
					<source src="http://122.224.174.179:9990/qzVideo/tv2_0727.mp4" type='video/mp4' />
				</video>
			</div>
			
		
			<script>
				$(document).ready(function() {
					$('#video1').mediaelementplayer({
						alwaysShowControls: false,
						videoVolume: 'horizontal',
						features: ['playpause','volume','progress']
					});
				
					$('#video2').mediaelementplayer({
						alwaysShowControls: false,
						videoVolume: 'horizontal',
						features: ['playpause','volume']
					});
				});
				
				var timer;
				var video1 = document.getElementById("video1");
				var video2 = document.getElementById("video2");
				var videos = [video1, video2];

				function checkState() {
					if(videos[0].readyState){
						$(".loadingImg").hide();
						clearInterval(timer);
					}
				}
				timer = setInterval(checkState, 300);
			</script>

		</body>

</html>